<!DOCTYPE html>
<html  style="overflow : hidden; ">
<head>
    <title>加载矢量底图</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="../leaflet/leaflet.css">
    <script type="text/javascript" src="../leaflet/leaflet.js"></script>
    <script type="text/javascript" src="../leaflet/CustomWebSDK.min.js"></script>

</head>

<body onload="init()"  style="margin : 0; ">
<div id="map" class="map" style ="position:absolute;bottom:0px;top:0px;width:100%"></div>


<script>
    var Map;
    function init(){
        var map = L.map('map',{crs:L.CRS.CustomEPSG4326,center: {lon:120.09215287988154,  lat:30.277052933991797},zoom:12,inertiaDeceleration:15000,maxZoom:20});
        //添加底图
        var layer = new L.GVMapGrid('http://ditu.zjzwfw.gov.cn:8090/mapserver/data/zjvmap/getData?x={x}&y={y}&l={z}&styleId=tdt_biaozhunyangshi_2017');
        map.addLayer(layer);
        var labelLayer = new L.GWVTAnno({tileSize:512});
        var dataSource = new Custom.URLDataSource();
        dataSource.url ='http://ditu.zjzwfw.gov.cn:8090/mapserver/label/zjvmap/getDatas?x={x}&y={y}&l={z}&styleId=tdt_biaozhunyangshi_2017';
        labelLayer.addDataSource(dataSource);
        map.addLayer(labelLayer);
        Map=map
    }

    document.onmousedown = function(event){



        Map.on('click', function(e) {
            //拾取要素
            var array = e.latlng
            var lat;
            var lng
            for (var i in array){
                lat=array.lat;
                lng=array.lng;
            }

            var myIcon = L.icon({
                iconUrl: '../leaflet/images/marker-icon.png',
                iconSize: [38, 50],
            });
            L.marker([ lat,lng], {icon: myIcon}).addTo(Map);

        });

    }



</script>

<ul id="select">
    <li>图标</li>
    <li>删除</li>
</ul>

</body>
</html>




